<template>
    <nav
        class="nav-links"
        v-if="userLinks.length || repoLink"
    >
        <!-- user links -->
        <div
            class="nav-item"
            v-for="item in userLinks"
            :key="item.link"
        >
            <DropdownLink
                v-if="item.type === 'links'"
                :item="item"
            />
            <NavLink
                v-else
                :item="item"
            />
        </div>

        <!-- repo link -->
        <a
            v-if="repoLink"
            :href="repoLink"
            class="repo-link"
            target="_blank"
            rel="noopener noreferrer"
        >
            <img src="./github.svg" :alt="repoLabel" class="github-icon">
            <!--{{ repoLabel }}
            <OutboundLink/>-->
        </a>
    </nav>
</template>

<script>
    import DropdownLink from '@theme/components/DropdownLink.vue'
    import {resolveNavLinkItem} from '../util'
    import NavLink from '@theme/components/NavLink.vue'

    export default {
        components: {NavLink, DropdownLink},

        computed: {
            userNav() {
                return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
            },

            nav() {
                const {locales} = this.$site
                if (locales && Object.keys(locales).length > 1) {
                    const currentLink = this.$page.path
                    const routes = this.$router.options.routes
                    const themeLocales = this.$site.themeConfig.locales || {}
                    const languageDropdown = {
                        text: this.$themeLocaleConfig.selectText || 'Languages',
                        items: Object.keys(locales).map(path => {
                            const locale = locales[path]
                            const text = themeLocales[path] && themeLocales[path].label || locale.lang
                            let link
                            // Stay on the current page
                            if (locale.lang === this.$lang) {
                                link = currentLink
                            } else {
                                // Try to stay on the same page
                                link = currentLink.replace(this.$localeConfig.path, path)
                                // fallback to homepage
                                if (!routes.some(route => route.path === link)) {
                                    link = path
                                }
                            }
                            return {text, link}
                        })
                    }
                    return [...this.userNav, languageDropdown]
                }
                return this.userNav
            },

            userLinks() {
                return (this.nav || []).map(link => {
                    return Object.assign(resolveNavLinkItem(link), {
                        items: (link.items || []).map(resolveNavLinkItem)
                    })
                })
            },

            repoLink() {
                const {repo} = this.$site.themeConfig
                if (repo) {
                    return /^https?:/.test(repo)
                        ? repo
                        : `https://github.com/${repo}`
                }
            },

            repoLabel() {
                if (!this.repoLink) return
                if (this.$site.themeConfig.repoLabel) {
                    return this.$site.themeConfig.repoLabel
                }

                const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
                const platforms = ['GitHub', 'GitLab', 'Bitbucket']
                for (let i = 0; i < platforms.length; i++) {
                    const platform = platforms[i]
                    if (new RegExp(platform, 'i').test(repoHost)) {
                        return platform
                    }
                }

                return 'Source'
            }
        }
    }
</script>

<style lang="stylus">
    .nav-links
        display inline-block

        a
            line-height 1.4rem
            color inherit

            &:hover, &.router-link-active
                color $accentColor

        .nav-item
            position relative
            display inline-block
            margin-left 1.5rem
            line-height 2rem

            &:first-child
                margin-left 0

        .repo-link
            margin-left 1.4rem
            vertical-align top
            .github-icon
                width 2.2rem
                height 2.2rem

    @media (max-width: $MQMobile)
        .nav-links
            .nav-item, .repo-link
                margin-left 0

    @media (min-width: $MQMobile)
        .nav-links a
            &:hover, &.router-link-active
                color $textColor

        .nav-item > a:not(.external)
            &:hover
                color $accentColor
            &.router-link-active
                color $accentColor
                &::after
                    content ""
                    display block
                    width 100%
                    height 3px
                    position absolute
                    bottom -.77rem
                    background-color $accentColor
</style>
